// 导入了vue
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'
// 给vue添加vuex的功能，可以理解为给vue安装vuex
Vue.use(Vuex)

export default new Vuex.Store({
  // 开启严格模式
  strict: true,
  // vuex里存放数据的地方
  state: {
    count: 0,
    list: [],
    // 购物车数据
    cartList: [
      { id: 1, name: '皮鞋', price: 9.9 },
      { id: 2, name: '凉鞋', price: 7699 },
      { id: 3, name: '外套', price: 2399 },
      { id: 4, name: '斜挎包', price: 17900 },
    ]
  },

  // vuex里计算属性
  getters: {
    // 参数1：固定的state
    totalPrice (state) {
      // 计算累加和
      return state.cartList.reduce((sum, v) => sum += v.price, 0)
    }
  },

  // vuex里写同步方法（函数）的地方
  mutations: {
    // 参数1：固定的state，指的就是当前vuex对象里的state
    add1 (state) {
      
      state.count++
    },
    // 参数1：固定的state
    // 参数2： 传进来的额外参数
    // mutations里的方法最多只能接收一个额外的参数
    addWithNum (state, obj) {

      state.count += obj.num1 + obj.num2
    },

    // 用来修改list的方法
    setList (state, obj) {

      state.list = obj
    } 
  },

  // vuex里写异步方法的地方
  actions: {
    // 参数1：固定的参数叫context，简写为ctx，他代表了当前的store对象
    updateCount (ctx) {
      // console.log(num, num2)
      // console.log('updateCount', ctx.state.count)
      // setTimeout(() => {
      //   ctx.commit('add1')
      // }, 1000)

      // 而是发请求获取数据，然后要存到state里
      setTimeout( () => {
        // 假装发了个请求得到一个res，拿到的是对象
        // 也就是服务器返回了一个对象
        let res = [ {id: 1, name: '皮鞋'}, { id: 2, name: '凉鞋' } ]
        // 把请求拿到的结果，通过commit的形式间接存到state里
        ctx.commit('setList', res)
      }, 1000 )
    }
  }
})
